<template>
  <div @click.stop="btnFlag=false">
    <div class="topDom">
      <nav_bar  title='项目记录列表' id="searchBar" background='#fff'  :back="true" :home="true" @back="handlerGobackClick" @home="handlerGohomeClick">
      </nav_bar>

      <div class="tip">
        <form name='pushMsgFm' report-submit @submit='orderSign' class="tepForm"  v-if="newMsg">   
          <button form-type="submit"  class="commit">
              你有新消息，请点击查看！
          </button>  
      </form>
      </div>
      <div class="search-bar">
        <div class="search-bar-left" @click="toggleArrow">
          <span>时间排序</span>
          <div class="arrow" >
            <div class="iconfont icon-jiantou arrow-up" :class="{'arrow-active':arrowIndex===2}"></div>
            <div class="iconfont icon-jiantou" :class="{'arrow-active':arrowIndex===1}"></div>
          </div>
        </div>
        <div class="search-bar-right">
          <!-- <input type="text" placeholder="输入车牌号" v-model="plateNum" @confirm="searchByCar"> -->
          <div @click="shoKeyBoardFn" class="input">{{plateNum?plateNum:'输入车牌号'}}</div>
          <img src="../../../static/images/icon/search.png" alt="" @click="searchByCar">
        </div>
      </div>
    </div>
    <div :class="{steelList:true,steelList_active:newMsg}">
    
    
    <div class="itemList" v-if="steelList.length!=0">
  <div class="item" v-for="(item,index) of steelList" :key="index"  @click.stop="toProjectDetail(item)">
      <div class="item-top">
        <div class="top-right">
          <div class="top-right-item">
              <div>
                <span class="car-num">{{item.plate_num||''}}</span>
              <span v-if="item.status == 0" style="color: #878586;margin-left: 10px">({{item.status_name}})</span>
              <span v-if="item.status == 1" style="color: orange;margin-left: 10px">({{item.status_name}})</span>
              <span v-if="item.status == 2" style="color: green;margin-left: 10px">({{item.status_name}})</span>
              </div>
              <div class="update_at">{{item.updated_at}}</div>
          </div>
          <div class="top-right-item">
            <div class="label">钢筋捆数</div>
            <div v-show="item.img_info.length!==null" class="content">{{item.img_info.length}}</div>
          </div>
          <div class="top-right-item">
            <div class="label">异常捆数</div>
            <div v-show="item.img_info.length!==null" class="content">{{item.result_abnormal}}</div>
          </div>
          <div class="top-right-item">
            <div class="label">钢筋总重</div>
            <div v-show="item.total_weight!==null" class="content">{{item.total_weight}}吨</div>
          </div>
        </div>
      </div>

      <!-- 项目按钮 -->
      <div class="item-bottom">
        <div class="item-bottom-btn" @click.stop='toReceiveRecord(item)' v-if="item.is_success_receipt==0">
          <img src="../../../static/images/icon/record.png" alt="">
          <span >收货记录</span>
        </div>
        <div  class="item-bottom-btn item-bottom-btn-success" v-if="item.is_success_receipt==1" @click.stop="donDo">
          <span>已完成收货</span>
          <img src="../../../static/images/icon/gou.png" alt="" class="gou_img">
          </div>
        <div class="item-bottom-btn" @click.stop="toCountsteel(item)" v-if="item.status==1">
          <img src="../../../static/images/icon/shibie.png" alt="">
          <span>钢筋识别</span>
        </div>
        <div  class="item-bottom-btn item-bottom-btn-success" v-if="item.status==2" @click.stop="donDo">
          <span>已完成识别</span>
          <img src="../../../static/images/icon/gou.png" alt="" class="gou_img">
        </div>
        <div class="item-bottom-btn">
          <img src="../../../static/images/icon/dustbin.png" alt="" @click.stop="del(item.id)">
        </div>
      </div>
      <!-- 项目按钮 end -->
  </div>
    </div>
    <div class="noContent" v-else>数据已加载完成...</div>
    <div class="bottom-btn">
      <div class="btn-wrapper" @click.stop="toggleBtn">
        <img src="../../../static/images/icon/add2.png" alt="" >
        <div>项目记录</div>
      </div>
      <!-- <div class="bottom-circle"  :class="{'transform-show':btnFlag}">
        <div class="bottom-btn-item btn-record" @click='toNewReceiveRecord'>收货记录</div>
        <div class="bottom-btn-item btn-distinguish" @click="toNewCountsteel">点条识别</div>
      </div> -->
    </div>
  </div>
  <van-popup
          :show="showKeyboard"
          position="bottom"
          overlay-style="background:none"
          duration="150"
          @close="closeKeyBord"
        >
    <plate-number-keyboard :show="true" @getResult="setNumber" @closeKeyBoard="getKeyBoardState"></plate-number-keyboard>
    </van-popup>
  </div>
</template>
<script>

export default {
  data() {
    return {
      showKeyboard:false,//显示键盘
      steelList:[],
      project_id:'',
      project:"",
      newMsg:'',
      startGetnewsTimer:'',
      imgList:[],
      btnFlag:false,//显示底部按钮
      arrowIndex:2,//排序的箭头激活
      plateNum:'',//搜索的车牌号
      page:1,
      page_info:''
    }
  },
  watch:{
    plateNum(nval){
      if(nval==''){
        this.page=1;
        this.steelList=[];
        this.getSteelList()
      }
    }
  },
  methods: {
    closeKeyBord(){
      this.showKeyboard=false
    },
    shoKeyBoardFn(){
      // this.showKeyboard=Math.random();//小程序observe组件setData内改变了show但没有监听到
      this.showKeyboard=true;
    },
    // closeKeyBoard(e){
    //   //关闭键盘
    //   if(e.mp.detail){
    //     this.showKeyboard=false;
    //   }
    //   if(e.mp.detail && this.plateNum){
    //     this.searchByCar();
    //   }
    // },
    setNumber(e){//获取输入的车牌号
      this.plateNum=e.target.value
    },
    handlerGobackClick(){
      wx.switchTab({url:'/pages/home/main'})
    },
    handlerGohomeClick(){
      wx.switchTab({url:'/pages/home/main'})
    },
    donDo(){
      //啥都不做
    },
    toCountsteel(item){
      //点条
      if(item.id){
        //从子项目点击
        // @params projectId 项目id
                  // name 项目名
                  // itemId 点条的子项目id
                  // plateNum 车牌号
      var url = `/pages/countSteel/main?projectId=${this.project.id}&name=${this.project.name}&itemId=${item.id}&plateNum=${item.plate_num}`
      }else{
        var url = `/pages/countSteel/main?projectId=${this.project.id}&name=${this.project.name}`
      }
      this.$currency.navigateTo(url)
    },

    async getSteelList(){
     const userToken=wx.getStorageSync('userToken');
     var orderBy=''
     if(this.arrowIndex==2){
      orderBy='desc'
     }else{
       orderBy='asc'
       
     }
     const res=await this.$request.postData('/ucenter/searchByCar',{
        project_id:this.project_id,
        user_token:userToken,
        plate_num:this.plateNum,
        page:this.page,
        order_by:orderBy,
        limit:10
      })
      if(res.data.level=='success'){
        const list=this.steelList;
        this.steelList = [...list,...res.data.data.point_items];
        this.project   = res.data.data.project;
        this.page_info=res.data.page_info;
        wx.stopPullDownRefresh()
      }
    },
    searchByCar(){
      //搜索车牌
      this.page=1;
      this.steelList=[];
      this.getSteelList()
    },
    toProjectDetail(item){
      this.$currency.navigateTo(`/pages/projectDetail/main?id=${item.id}&project_id=${this.project_id}`)
    },
    async del(id){
       const select=await this.$currency.showModal('是否删除该项目记录','')
          if(select){
            const userToken=wx.getStorageSync('userToken')
            const res=await this.$request.postData('/ucenter/deletePointItem',{
              point_item_id:id,
              user_token:userToken
            })
            if(res.data.level=='success'){
              
              this.$currency.showToast(res.data.message)
              setTimeout(()=>{
                this.steelList=[];
                this.page=1;
                this.getSteelList();
              },1500)
            }else{
              this.$currency.showToast(res.data.message)
            }
            
          }
    },
    prevImg(current){
            //预览图片
            wx.previewImage({
                current: current, // 当前显示图片的http链接
                urls: [current], // 需要预览的图片http链接列表
                fail:err=>{console.log(err)}
            })
        },
    orderSign(){
        //刷新
        this.page=1;
        this.steelList=[];
        this.getSteelList()
        this.recordState()
        this.newMsg=false;
      },
    async startGetnews(){
        //轮询获取新消息s
        const _this=this
        async function timerFn () {
          const userToken=wx.getStorageSync('userToken')
          const data=await _this.$request.postData('/ucenter/roundPointItemStatus',{
            user_token:userToken,
            project_id:_this.project_id
          },false)
          if(data.data.data=='yes'){
            _this.newMsg=true
          }
        _this.startGetnewsTimer=  setTimeout(timerFn, 15000)
        }
        timerFn()
      },
    recordState(){
        //点击新消息后触发
        const userToken=wx.getStorageSync('userToken')
        const res=this.$request.postData('/ucenter/cancelPointItemStatusReminder',{
          user_token:userToken,
          project_id:this.project_id
        })
      },

      // 新的方法
    toggleBtn(){
      // //显示隐藏底部按钮
      this.$currency.navigateTo(`/pages/newProjectItem/main?projectId=${this.project_id}&name=${this.project.name}&total=${this.page_info.total}`)
      // this.btnFlag=!this.btnFlag
    },
    toReceiveRecord(item){
      //跳转收货记录

       // @params projectId 项目id
                  // name 项目名
                  // itemId 点条的子项目id
                  // plateNum 车牌号
      if(item.id){
        var url = `/pages/receiveRecord/main?projectId=${this.project.id}&name=${this.project.name}&itemId=${item.id}&plateNum=${item.plate_num}`
      }
      else{
        var url = `/pages/receiveRecord/main?projectId=${this.project.id}&name=${this.project.name}`
      }
      this.$currency.navigateTo(url)
    },

    toggleArrow(){
      //切换箭头的排序 默认倒序
      this.page=1;
      this.steelList=[];
      this.getSteelList();
      this.arrowIndex=this.arrowIndex==1?2:1;
    },
    getLastPage(){//避免涂鸦返回后刷新数据
      let arr=getCurrentPages();
      let index=arr.length-2>=0?arr.length-2:0;
      let lastPage=arr[index].route;//上一页的页面
      if(lastPage=='pages/countSteel/main'){
        return true
      }
      return false
    },
    initData(){
      this.page=1;
      this.newMsg='';
       clearTimeout(this.startGetnewsTimer)
      this.newMsg='';
      this.steelList=[];
      this.page_info='';
      this.showKeyboard=false;
      this.plateNum=''
    },
  },
  onLoad(){
    setTimeout(()=>{
      this.aa=22;
    },2000)
    let updateFlag=this.getLastPage();
    if(updateFlag){
      return
    }
      this.initData();
     if(this.$root.$mp.query.id){
      this.project_id=this.$root.$mp.query.id;
      this.getSteelList()
    }
    this.startGetnews()
  },
  onPullDownRefresh(){
    this.page=1;
    this.steelList=[];
    this.getSteelList()
  },
  
  onHide(){
     clearTimeout(this.startGetnewsTimer)
      this.newMsg='';
  },
  // onUnload() {
  //   this.initData()
  // },
   onReachBottom(){
    this.page++;
    this.getSteelList();
  },
}
</script>
<style lang="scss" scoped>
.topDom{
  background: #fff;
}
   .steelList{
    width: calc(100% - 10px);
    margin-left: 10px;
    font-size: 16px;
  }
  .steelList_active{
    margin-top:30px;
  }

  .commit{
    font-size: 14px !important;
  }
  //搜索栏
  .search-bar{
    display: flex;
    align-items: center;
    position: fixed;
    // top:68px;
    width:100%;
    padding:5px 10px;
    background: #fff;
    border-bottom: 2px solid #eee;
  }
  .search-bar-left{
    display: flex;
    align-items: center;
    .arrow{
      margin-left:5px;
      .iconfont{
        font-size: 14px !important;
      }
    }
    .arrow-active{
      color:#1296db;
    }
    .arrow-up{
      transform: rotate(180deg)
    }
  }
  
  .search-bar-right{
    display: flex;
    align-items: center;
    flex:1;
    margin-left:20px;
    input,.input{
      flex:1;
      line-height: 50px;
    }
    img{
      width:30px;
      height: 30px;
      margin-right: 30px;
    }
  }
  
  
  .itemList{
    margin-top:80px; 
    padding-bottom: 70px;
    .item{
      border-radius: 10px;
      margin:20px 10px;
      margin-left:5px;
      padding:5px;
      border:1px solid #eee;
    }
    .item-top{
      display: flex;
      .top-left{
        margin-right: 20px;
        img{
          width:120px;
          height: 100px;
          border-radius: 5px;
        }
      }
      .top-right{
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        .car-num{
          font-weight: 600;
          color:#1296db;
        }
        .update_at{
          font-size: 12px;
        }
        &-item{
          &:first-child{
          margin-bottom:20px;
        }
          width: 28%;
          padding:0 5px;
          border-right: 2px solid #eee;
          text-align: center;
          .label{
            margin-bottom: 10px;
          }
          .content{
            font-weight: 600;
          }
          &:last-child{
          border: none;
        }
        }
        &-item:first-child{
          display: flex;
          width:100%;
          border:none;
          justify-content: space-between;
        }
      }
    }

    //项目按钮
    .item-bottom{
      margin-top:20px;
      display: flex;
      
      justify-content: space-between;
      &-btn{
        display: flex;
        align-items: center;
        // background-color: #409eff!important;
        img{
          width:25px;
          height: 25px;
          margin-right:5px;
        }
        .gou_img{
          margin-right: 0;
          margin-left:5px;
          width: 25px;
          height: 25px; 
        }
      }
    }
  }



  .noContent{
    width:100%;
    position: fixed;
    top:40%;
    left:0;
    text-align: center;
    font-size: 16px;
  }

  //底部按钮
  .bottom-btn{
    position: fixed;
    bottom:0px;
    padding: 10px 0;
    width: 100%;
    left:0;
    background: #fff;
    display: flex;
    justify-content: center;
    img{
      width:30px;
      height: 30px;
      border-radius: 50%;
      position: relative;
      z-index: 999;
    }
    .btn-wrapper{
      display: flex;
      align-items: center;
      background-color: #409eff;
      color: #fff ;
      border-radius: 10px;
      padding:0 5px;
    }
    .transform-show{
      height: 200px !important;
        opacity: 1 !important;
      }
    .bottom-circle{
      opacity: 0;
      transition: all 0.5s;
      background: #ecf5ff;
      width: 200px;
      height: 0;
      border-radius: 50%;
      bottom:-100px;
      position: absolute;
      font-weight: 600;
      .bottom-btn-item{
        position: absolute;
        top:20%;
      }
      .btn-record{
        left:20px;
        color:gray;
      }
      .btn-distinguish{
        right:20px;
      }
    }
  }

.tip{
  position: fixed;
  width: 100%;
  z-index:9999;
  button{
    color:red;
  }
}
.btn-active{
       background-color:red
      }

 .home{
    position: fixed;
    bottom: 90px;
    right: 20px;
    img{
      width: 30px;
      height: 30px;
    }
  }

</style>

